<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>愉直播</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<link rel="stylesheet" type="text/css" href="../c/swiper.min.css" />
		<style>
			body {
			background: #fff;
			color: #222;
		}

		.slide {
			/*background: #ddd;*/
			/*height: 20rem;*/
		}

		.title {
			font-size: 0.85rem;
			padding: 0.75rem;
			padding-top: 0;
			color: #000;
		}

		.p {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 0.75rem;
			padding-bottom: 0.5rem;
			border-bottom: 1px solid #efefef;
		}

		.p div {
			font-size: 0.65rem;
			opacity: 0.7;
			color: #555;
		}
		.money{
			padding: 0.35rem 0.75rem;
		}
		.money b {
			font-size: 1.5rem;
			color: #FE2C55;
			padding-right: 0.2rem;
		}

		.content {
			padding: 0.75rem;
			padding-top: 0;
			/*height: 100rem;*/
			margin-bottom: 2rem;
			padding-bottom: 2rem;
		}

		.content .h5 {
			font-size: 0.75rem;
			padding: 0.35rem 0;
		}

		.content .body ,.content .body p,a,b{
			font-size: 0.75rem;
			color: #222;
		}

		.content .body img {
			width: 100%;
			height: auto;
			margin: 0.25rem 0;
		}
		#sx-footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.sx-footer {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem;
		 	border-top: 1px solid #f9f9f9;
		}

		.sx-footer div {
			width: auto;
		}
		.sx-footer .img{
			font-size: 0.55rem;
			width: 3rem;
			text-align: center;
			color: #444;
		}
		.sx-footer .img img{
			width: 1rem;
			margin: 0 auto;
			text-align: center;
			opacity: 0.6;
		}
		.sx-footer .btn ,.shop .r .btn{
			background-image: -webkit-linear-gradient(left, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			background-image: -o-linear-gradient(left, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			background-image: linear-gradient(to right, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			text-align: center;
			color: #fff;
			font-size: 0.65rem;
			padding: 0.45rem 0;
			width: 100%;
		}
		.sx-footer .jia{
			border-top-left-radius: 1rem;
			border-bottom-left-radius: 1rem;
		}
		.sx-footer .mai{
			background-image: -webkit-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: -o-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: linear-gradient(to right, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			/*border-top-right-radius: 1rem;
			border-bottom-right-radius: 1rem;*/
		}
		.sx-footer .r{
			display: flex;
			justify-content: space-between;
			width: 78%;
		}
		.shop{
			display: flex;
			justify-content:space-between;
			padding: 0.75rem;
			align-items: center;
			border-bottom: 1px solid #efefef;
		}
		.shop .img{
			width: 2.5rem;
			height: 2.5rem;
			border-radius: 50%;
			border:1px solid #ccc;
		}
		.shop .l{
			display: flex;
			font-size: 0.75rem;
			align-items: center;
		}
		.shop .l-l{
			padding-left: 0.5rem;
		}
		.shop .l-l div.h5{
			font-size: 0.75rem;
			opacity: 1;
			padding-bottom: 0.15rem;
		}
		.shop .l-l div{
			font-size: 0.6rem;
			opacity: 0.8;
			letter-spacing: 1px;
		}
		.shop .l-l div b{
			color: #FE2C55;
		}
		.shop .r .btn{
			/*background-image: -webkit-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: -o-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: linear-gradient(to right, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));*/
			color: #fff;
			width: auto;
			padding: 0.35rem 1.5rem;
			display: inline-block;
			border-radius: 2rem;
			font-size: 0.6rem;
			background: #fff;
			border:1px solid #FE2C55;
			color: #FE2C55;
		}
		#sx-header .aui-pull-left {
			width: 3rem;
		}
		#sx-header .aui-pull-left img{
			position: absolute;
			top: 0.25rem;
			left: 0.4rem;
			width: 1.8rem;
		}
		#sx-header{
			position: fixed;
			top: 0;
			left: 0;
			background-color:rgba(254, 44, 85, 0);
		}
		#sx-header .aui-title{
			opacity: 0;
		}
		.slide{
			background: #fff;
		}
		.slide img{
			width: 100%;
			height: 100%;
		}
	</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav" id="sx-header">
			<a class="aui-pull-left aui-btn" tapmode onclick="_close()">
				<img src="../i/right-bais.png" />
			</a>
			<div class="aui-title"></div>
		</header>
		<script id="sx-list" type="text/x-dot-template">
			<div class="swiper-container slide" style="height:{{= w}}px">
			<div class="swiper-wrapper">
				{{ for(var i=0;i < s_data.view.img_list.length; i++) { }}
				<div class="swiper-slide"><img src="{{= _img(s_data.view.img_list[i],api.winWidth+200,api.winWidth+200)}}" ></div>
				{{ } }}
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="aui-content">
			<div class="money">
				<b>{{= s_data.view.money}}</b>元
			</div>
			<div class="title">
				{{= s_data.view.title}}
			</div>
			<div class="p">
				<div>存库{{= s_data.view.num}}</div>
				<div>已售{{= s_data.view.num_s}}</div>
				<div>包邮</div>
				<div>7天无理由退款</div>
			</div>
			<div class="shop">
				<div class="l">
					<img src="{{= _img(s_data.info.img,60) }}" class="img">
					<div class="l-l">
						<div class="h5">{{= s_data.info.title}}</div>
						<div class="p1">全部商品<b>{{= s_data.info.num}}</b>件</div>
					</div>
				</div>
<!-- 				<div class="r" tapmode onclick="_url({uid:{{= s_data.info.uid}}},'shop_shop_win')">
					<div class="btn">进店逛逛</div>
				</div> -->
			</div>
			<div class="content">
				<div class="h5">商品详细</div>
				<div class="body">{{= s_data.view.content}}</div>
			</div>
		</div>
		<div id="sx-footer">
			<div class="sx-footer">
				<div class="img" tapmode onclick=" return api.call({number: '{{= s_data.info.mobile}}'}); ">咨询</div>
				<div class="r">
					<!--<div class="btn jia" tapmode onclick="catr()">加入购物车</div>-->
					<div class="btn mai" tapmode onclick="pay()">立即购买</div>
				</div>
			</div>
		</div>
	</script>
		<div id="sx-view">
			<div id="jiazai" style=" padding-top:50%; "><img src="../i/loading_more.gif" /></div>
		</div>
	</body>
	<script type="text/javascript" src="../j/swiper.min.js"></script>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript">
		var s_data, w, header_h = 0,
			webBrowser
		apiready = function() {
			header = $api.byId('sx-header');
			$api.fixStatusBar(header);
			header_h = $api.offset(header).h;
			w = api.winWidth
			console.log(JSON.stringify(api.pageParam))
			if (!api.pageParam['id'] && !api.pageParam['vid']) {
				return _alert('商品不存在或已下架', function(ret, err) {
					_close();
				});
			}
			data();
		}

		function data() {
			_ajax('shop/view', function(ret, err) {
				// console.log(JSON.stringify(ret))
				if (ret) {
					s_data = ret;
					// console.log(ret.view.url);
					$('.aui-title').text(ret.info.title)
					if (ret.view.url) {
						return wurl();
					}
					//渲染模版
					var evalData = doT.template($api.html($api.byId('sx-list')));
					$api.html($api.byId('sx-view'), evalData(ret));
					api.parseTapmode();
					$api.fixTabBar($api.dom('#sx-footer'))

					var swiper = new Swiper('.swiper-container', {
						pagination: {
							el: '.swiper-pagination',
							dynamicBullets: true,
						},
					});
					$(window).on('scroll', function() {
						var sTop = $(window).scrollTop();
						var a = ((sTop - header_h - ((w - header_h) / 3))) / (w - header_h) * 2;
						if (sTop > (w - header_h)) {} else {
							// console.log(a)
						}
						$('#sx-header').css('background-color', 'rgba(254, 44, 85, ' + a + ')');
						// $('#sx-header img.l').css('opacity',a);
						$('#sx-header .aui-title').css('opacity', a);
					});
				} else {
					_alert('商品不存在或已下架', function(ret, err) {
						_close();
					});
				}
			}, {
				id: api.pageParam['id']
			})
		}

		function catr(id) {
			_msg('已加入购物车');
		}

		function pay() {
			console.log(JSON.stringify(s_data))
			if (!s_data.view.num) {
				return _msg('当前商品库存为' + s_data.view.num + '件库存，请联系商家协商')
			}
			_url({
				id: s_data.view.id,
				animation: true
			}, 'shop_pay')
		}

		function wurl() {
			$('#sx-header').css('background-color', 'rgba(254, 44, 85, 1)');
			webBrowser = api.require('webBrowser');
			webBrowser.openView({
				url: s_data.view.url,
				rect: {
					x: 0,
					y: header_h,
					w: 'auto',
					h: 'auto'
				}
			}, function(ret, err) {

			});
		}
	</script>
</html>
